<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 顶部 -->
        <div class="top">
          <el-form
            :model="form"
            ref="form"
            label-width="80px"
          >
            <el-row>
            <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="form.keyword"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="14">
            <el-form-item label="状态">
              <el-select
                v-model="form.state"
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option
                  v-for="item in options"
                  :key="item.state"
                  :label="item.title"
                  :value="item.state"
                >
                </el-option>
              </el-select>
              <el-button @click="remove">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item></el-col>
            <el-col :span="4"><el-form-item>
              <el-button type="success" @click="addArticles">新增技巧</el-button>
            </el-form-item></el-col>
          </el-row>

          </el-form>
          <el-alert
            :title="`数据一共${counts}条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
        <!-- 表格 -->
        <el-table :data="articlesList" style="width: 100%">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="title" label="文章标题" width="380">
            <template #default="{row}">
              {{row.title}}
              <a @click="openVideo(row.videoURL)" v-if="row.videoURL" class="el-icon-film"></a>
            </template>

          </el-table-column>
          <el-table-column prop="visits" label="阅读数" width="180">
          </el-table-column>
          <el-table-column prop="username" label="录入人"> </el-table-column>
          <el-table-column prop="createTime" label="录入时间">
            <template #default="{row}">
              {{formattingTime(row.createTime)}}
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template #default="{ row }">
              {{ row.state ? '已启用' : '已禁用' }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="previewArticles(row)"
                >预览</el-button
              >
              <el-button @click="changeStateById(row)" type="text">{{
                row.state ? '禁用' : '启用'
              }}</el-button>
              <el-button type="text" @click="changeArticles(row.id)"  :disabled="row.state === 1"
                >修改</el-button
              >
              <el-button @click="delArticles(row.id)" type="text" :disabled="row.state === 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="bottom">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="counts"
            :page-size="form.pagesize"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
        <!-- 视频 -->
        <div v-if="videoURL" class="videoPlay">
          <div class="close" @click="closeVideo">
            <span class="el-icon-close" />
          </div>
          <div class="videobox">
            <video ref="videoRef" :src="videoURL" />
          </div>
        </div>
        <!-- 新增弹层 -->
        <AddDialog :articlesById="articlesById" @change_dialog="changeDialog" @close_add_dialog="closeAddDialog" :showAdd="showAdd"/>
        <!-- 预览弹层 -->
        <PreviewDialog :previewarticlesById="previewarticlesById" :showPreview="showPreview" @close_Preview="closePreview"/>
      </el-card>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list, detail, changeState, remove } from '@/api/hmmm/articles.js'
import AddDialog from '../components/articles-add.vue'
import PreviewDialog from '../components/articles-preview.vue'
export default {
  components: {
    AddDialog,
    PreviewDialog
  },
  data () {
    return {
      form: {
        id: null, // 当前行id
        keyword: '', // 输入框
        state: null, // 下拉框
        page: 1, // 当前页数
        pagesize: 10 // 每页条数
      },
      options: [
        { title: '启用', state: 1 },
        { title: '禁用', state: 0 }
      ], // 下拉框选项
      showPreview: false, // 预览弹层显隐
      showAdd: false, // 新增弹层显隐
      counts: 0, // 面试题总数
      articlesList: [], // 面试技巧列表
      articlesById: {}, // 当前行文章内容
      state: null, // 提交的状态
      videoURL: null, // 视频地址
      previewarticlesById: null// 预览对象
    }
  },
  created () {
    this.getArticlesList()
  },
  methods: {
    // 增
    addArticles () {
      this.form.id = null
      this.showAdd = true
    },
    // 查
    async getArticlesList () {
      const res = await list(this.form)
      console.log(res)
      this.articlesList = res.data.items
      this.counts = res.data.counts
    },
    // 改
    async changeArticles (id) {
      this.form.id = id
      const res = await detail({ id: this.form.id })
      this.showAdd = true
      this.articlesById = res.data
      // console.log(res)
    },
    // 删
    delArticles (id) {
      this.$confirm('此操作将永久删除该文章，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 点击确定执行的代码
        try {
          await remove({ id })
          this.$message.success('删除成功')
          this.getArticlesList()
        } catch (error) {
          this.$message.error(error)
        }
      }).catch(() => {
        // 点击取消执行的代码
      })
    },
    // 预览
    previewArticles (row) {
      this.showPreview = true
      this.previewarticlesById = row
      // console.log(this.articlesById)
    },
    // 关闭预览弹层
    closePreview () {
      this.showPreview = false
    },
    // 关闭新增弹层
    closeAddDialog () {
      this.showAdd = false
    },
    // 重新获取列表
    changeDialog () {
      this.getArticlesList()
    },
    // 清除按钮
    remove () {
      this.form = {
        id: null,
        input: '',
        state: null,
        page: 1,
        pagesize: 10
      }
    },
    // 搜索按钮
    search () {
      this.getArticlesList()
    },
    // 状态切换
    async changeStateById (row) {
      this.form.id = row.id
      if (row.state === 0) {
        this.state = 1
      } else {
        this.state = 0
      }
      try {
        await changeState({ ...this.form, state: this.state })
        this.$message.success('操作成功')
        this.form = {
          id: null,
          input: '',
          state: null,
          page: 1,
          pagesize: 10
        }
        this.getArticlesList()
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 格式化时间
    formattingTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 打开视频
    openVideo (vido) {
      this.videoURL = vido
    },
    // 关闭视频
    closeVideo () {
      this.videoURL = null
    },
    // 分页器
    currentChange (page) {
      // console.log(page)
      this.form.page = page
      this.getArticlesList()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .top {
  margin-bottom: 20px;
  .el-form-item {
    display: inline-block;
    .el-button {
      margin-left: 5px;
    }
    .el-input__inner {
      width: 200px;
    }
  }
}
.el-icon-film {
  color: #0000FF;
}
.bottom {
  margin-top: 20px;
}
.videoPlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
}
.close {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
}
.videobox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
}
video {
  width: 100%;
  height: 100%;
}
</style>
